<template>
  <div class="header">
    <div style="float: right">
      <el-tooltip
          class="item"
          effect="dark"
          content="会员登出"
          placement="bottom"
        >
          <el-button
            plain
            icon="el-icon-right"
            circle
            style="border: none; width: 30px"
            @click="outlogin"
          ></el-button>
        </el-tooltip>
    </div>
    <div style="float: right" class="cartdiv">
      <el-tooltip
        class="item"
        effect="dark"
        content="我的购物袋"
        placement="bottom"
      >
        <el-button
          plain
          icon="el-icon-goods"
          circle
          @click="myCart"
          style="border: none"
        ></el-button>
      </el-tooltip>
      <el-drawer
        title="您的购物袋"
        :visible.sync="cart"
        direction="rtl"
        header
        custom-class="demo-drawer"
        ref="drawer"
        @opened="open"
      >
        <div class="wrap1">
          <div class="wrap1-content" v-for="(goods,index) in goodslist" :key="index">
            <div
              style="
                margin-left: 20px;
                width: 45%;
                height: 90px;
                float: left;
                flex: 1;
              "
            >
              <el-image
                style="margin-top: 15px; width: 90%; height: 85%"
                :src="goods.image"
              ></el-image>
            </div>
            <div style="float: left; flex: 1; width: 45%; margin-left: 40px">
              {{goods.name}}
            </div>
          </div>
        </div>
        <div
          style="
            margin-top: 100px;
            width: 340px;
            height: 50px;
            margin-left: 50px;
          "
        >
          <el-button style="margin-top:30px;width: 100%; height: 100%">立即结账</el-button>
        </div>
      </el-drawer>
    </div>
    <div class="head1">
      <img
        style="width: 111.6px; height: 60px"
        src="../images/logo.jpg"
        @click="home"
      />
      <div>
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          style="display: inline-block; border: none"
        >
          <el-menu-item index="1" @click="table = true">精选</el-menu-item>
          <el-drawer
            title="精选"
            :visible.sync="table"
            direction="ttb"
            size="75%"
          >
            <div class="parent1" style="height: 100%">
              <div style="float: left; flex: 1">
                <el-cascader-panel
                  v-model="typeArray"
                  :options="typeoptions"
                  style="border: none"
                  :props="{
                    value: 'id',
                    label: 'name',
                    checkStrictly: true,
                  }"
                  @change="handleChange"
                ></el-cascader-panel>
              </div>
              <div style="float: left; flex: 1">
                <el-image
                  style="margin-top: 15px; width: 90%; height: 85%"
                  src="https://team-shop-1303824460.cos.ap-beijing.myqcloud.com/shop-images/QQ%E5%9B%BE%E7%89%8720201006115403.png"
                ></el-image>
              </div>
            </div>
          </el-drawer>
          <el-menu-item index="2" @click="table = true">零食类型</el-menu-item>
          <el-menu-item index="3" @click="table = true">新品尝鲜</el-menu-item>
        </el-menu>
      </div>
      <div style="float: right">
        <el-button
          plain
          icon="el-icon-search"
          circle
          style="border: none"
        ></el-button>
      </div>
      <div style="float: right; margin-right: 5px">
        <el-input placeholder="搜索建议：中秋礼盒"> </el-input>
      </div>
      <div
        style="float: right; margin-right: 5px"
        v-if="getItem('account') == undefined"
      >
        请登录
      </div>
      <!-- <div v-if="getItem('account')!=undefined" style="float: right;margin-right:5px;margin-top:0;padding:0"> <el-button style="border:none"  plain size="medium" @click="outlogin">注销</el-button></div> -->
      <div
        style="float: right; margin-right: 5px"
        v-if="getItem('account') != undefined"
      >
        欢迎您，{{ getItem("account") }}
      </div>
    </div>
  </div>
</template>

<script>
import { login, getId } from "@/api/user.js";
import { getTypeList } from "@/api/type.js";
import { getGoodsByUser } from "@/api/cart.js";
import {
  setToken,
  setItem,
  getItem,
  clearToken,
  clearItem,
} from "@/utils/localStorage.js";
export default {
  data() {
    return {
      dialog: false,
      rules: {
        account: [{ message: "账号还没有输入哦！", trigger: "blur" }],
        password: [{ message: "密码还没有输入哦！", trigger: "blur" }],
      },
      user: {},
      typeoptions: [],
      typeArray: [],
      table: false,
      cart: false,
      goodslist:[],
    };
  },
  created() {
    this.loadTypes();
    
  },
  methods: {
    open(){
      this.loadGoods()
    },
    handleChange() {
      console.log(this.typeArray[this.typeArray.length - 1]);
      let id = this.typeArray[this.typeArray.length - 1];
      this.$router.push({ path: "/shopmain", query: { typeId: id } });
      location.reload();
    },
    home() {
      this.$router.push("/");
    },
    getItem(key) {
      return getItem(key);
    },
    loadTypes() {
      getTypeList().then((res) => {
        if (res.data.code === "0000") {
          this.typeoptions = res.data.data;
        }
      });
    },
    loadGoods(){
      let userId=getItem("id")
      getGoodsByUser(userId).then(res=>{
        if(res.data.code=="0000"){
          this.goodslist=res.data.data
        }
      })
    },
    login() {
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          login(this.user).then((response) => {
            if (response.data.code === "0000") {
              let token = response.data.data.token;
              setToken(response.data.data.token);
              setItem("account", this.user.account);
              getId(token).then((res) => {
                setItem("id", res.data);
              });
              this.dialog = false;
              this.$message.success("登录成功");
              // this.$router.push("/home");
            } else {
              this.$message.error("用户名密码错误！");
            }
          });
          // api调用
        } else {
          return false;
        }
      });
    },
    reset() {
      this.$refs.loginForm.resetFields();
    },
    myUfun() {
      if (getItem("account") == undefined) {
        this.dialog = true;
      } else {
        this.$router.push("/myufun");
      }
    },
    register() {
      this.$router.push("/register");
    },
    myCart(){
      if(getItem("account")!=undefined){
        this.cart=true
      }else{
        this.$message.error("请登录")
      }
    },
    outlogin() {
      clearToken();
      clearItem("account");
      clearItem("id");
      this.$router.push("/");
      this.$message.success("退出成功");
    },
  },
};
</script>

<style lang="scss" >
.head1 {
  display: fixed;
  height: 60px;
  text-align: left;
}
.head1 > div {
  float: left;
}
.head1 img {
  float: left;
  padding: 0;
  margin: 0;
}

.parent1 {
  display: flex;
  height: 300px;
  border-bottom: 1px solid lightgray;
}
.parent1 > div {
  background-color: white;
}

.wrap1{
  margin-top: -25px;
}
.wrap1-content {
  float: left;
  width: 33%;
  height: 120px;
  width: 380px;
  border-bottom: 1px solid lightgrey;
  margin-left: 30px;
  display: flex;
  align-items: center;
}
.cartdiv .el-drawer__body {
  overflow: scroll;
}

.cartdiv .el-drawer__container ::-webkit-scrollbar{
    display: none;
}
</style>